[AssetMapper] Better CSS starter kit #1450
Conversation
When creating a new project, this helps people having a better first view of a symfony page
|
Thanks for the PR 😍 How to test these changes in your application
Diff between recipe versionsIn order to help with the review stage, I'm in charge of computing the diff between the various versions of patched recipes. symfony/asset-mapper6.3 vs 6.4diff --git a/symfony/asset-mapper/6.3/assets/app.js b/symfony/asset-mapper/6.4/assets/app.js
index cb0082a8..6174cc64 100644
--- a/symfony/asset-mapper/6.3/assets/app.js
+++ b/symfony/asset-mapper/6.4/assets/app.js
@@ -4,4 +4,6 @@
* This file will be included onto the page via the importmap() Twig function,
* which should already be in your base.html.twig.
*/
-console.log('This log comes from assets/app.js - welcome to AssetMapper! 🎉')
+import './styles/app.css';
+
+console.log('This log comes from assets/app.js - welcome to AssetMapper! 🎉');
diff --git a/symfony/asset-mapper/6.3/assets/styles/app.css b/symfony/asset-mapper/6.4/assets/styles/app.css
index dd6181a1..dd4caaf1 100644
--- a/symfony/asset-mapper/6.3/assets/styles/app.css
+++ b/symfony/asset-mapper/6.4/assets/styles/app.css
@@ -1,3 +1,94 @@
body {
- background-color: skyblue;
+ font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+ line-height: 1.5;
+ padding: 1rem;
+ max-width: 900px;
+ margin: 0 auto;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+}
+
+h1, h2, h3, h4, h5, h6 {
+ margin: 0 0 .5em;
+ font-weight: bold;
+ line-height: 1.2;
+}
+
+h1 {
+ font-size: 1.5rem;
+}
+
+h2 {
+ font-size: 1.25rem;
+}
+
+h3 {
+ font-size: 1.125rem;
+}
+
+p {
+ margin: 0 0 1em;
+}
+
+ul, ol {
+ margin: 0 0 1em;
+ padding-left: 1.25em;
+}
+
+a {
+ color: #0b84ff;
+ text-decoration: underline;
+}
+
+label {
+ display: block;
+ margin-bottom: .25em;
+ font-size: .9rem;
+ color: #555;
+}
+
+input, textarea, select, button {
+ font: inherit;
+ color: inherit;
+ padding: .5rem .6rem;
+ border: 1px solid #ccc;
+ border-radius: 6px;
+ background: #fff;
+}
+
+textarea {
+ resize: vertical;
+ min-height: 6rem;
+}
+
+button {
+ background: #0b84ff;
+ color: #fff;
+ border: none;
+ cursor: pointer;
+}
+
+button:active {
+ transform: translateY(1px);
+}
+
+img, video {
+ max-width: 100%;
+ height: auto;
+}
+
+table {
+ border-collapse: collapse;
+ width: 100%;
+ margin: 1em 0;
+}
+
+th, td {
+ border: 1px solid #ddd;
+ padding: .5rem;
+ text-align: left;
+}
+
+th {
+ background: #f9f9f9;
}
diff --git a/symfony/asset-mapper/6.3/config/packages/asset_mapper.yaml b/symfony/asset-mapper/6.4/config/packages/asset_mapper.yaml
index d1ac653b..f7653e97 100644
--- a/symfony/asset-mapper/6.3/config/packages/asset_mapper.yaml
+++ b/symfony/asset-mapper/6.4/config/packages/asset_mapper.yaml
@@ -3,3 +3,9 @@ framework:
# The paths to make available to the asset mapper.
paths:
- assets/
+ missing_import_mode: strict
+
+when@prod:
+ framework:
+ asset_mapper:
+ missing_import_mode: warn
diff --git a/symfony/asset-mapper/6.3/importmap.php b/symfony/asset-mapper/6.4/importmap.php
index 5c2c21d8..70ebf14f 100644
--- a/symfony/asset-mapper/6.3/importmap.php
+++ b/symfony/asset-mapper/6.4/importmap.php
@@ -1,21 +1,19 @@
<?php
/**
- * Returns the import map for this application.
+ * Returns the importmap for this application.
*
* - "path" is a path inside the asset mapper system. Use the
* "debug:asset-map" command to see the full list of paths.
*
- * - "preload" set to true for any modules that are loaded on the initial
- * page load to help the browser download them earlier.
+ * - "entrypoint" (JavaScript only) set to true for any module that will
+ * be used as an "entrypoint" (and passed to the importmap() Twig function).
*
* The "importmap:require" command can be used to add new entries to this file.
- *
- * This file has been auto-generated by the importmap commands.
*/
return [
'app' => [
- 'path' => 'app.js',
- 'preload' => true,
+ 'path' => './assets/app.js',
+ 'entrypoint' => true,
],
];
diff --git a/symfony/asset-mapper/6.3/manifest.json b/symfony/asset-mapper/6.4/manifest.json
index c6fb477e..7454a3d7 100644
--- a/symfony/asset-mapper/6.3/manifest.json
+++ b/symfony/asset-mapper/6.4/manifest.json
@@ -6,22 +6,19 @@
},
"aliases": ["asset-mapper", "importmap"],
"gitignore": [
- "/%PUBLIC_DIR%/assets/"
+ "/%PUBLIC_DIR%/assets/",
+ "/assets/vendor/"
],
+ "composer-scripts": {
+ "importmap:install": "symfony-cmd"
+ },
"add-lines": [
{
"file": "templates/base.html.twig",
- "content": " {{ importmap() }}",
+ "content": " {% block importmap %}{{ importmap('app') }}{% endblock %}",
"position": "after_target",
"target": "{% block javascripts %}",
"warn_if_missing": true
- },
- {
- "file": "templates/base.html.twig",
- "content": " <link rel=\"stylesheet\" href=\"{{ asset('styles/app.css') }}\">",
- "position": "after_target",
- "target": "{% block stylesheets %}",
- "warn_if_missing": true
}
],
"conflict": { |
florentdestremau
changed the title
|
For sure this cannot go in the 6.4 recipe. Based on our policy, this kind of change should go in the 7.4 recipe. However, I'm not convinced this is worth it. Projects will need to make their own decisions about design anyway. |
There was a problem hiding this comment.
There are too too many opinionated rules, that may fit your needs, but won't fit other people needs.
If we really wants to improve this file, either we use normalize.css (but it does not seems really relevent in 2025), either we only keep a few rules (font-family and *-font-smooting) from body selector.
Otherwise, I don't think that's really worth it
Yes, I initially did that but realized it's harder to compare and then saw the bot doing the diff... I agree this should be 7.4
Yes but this makes it easier on the eyes for very small tests. Just a suggestion.
understood, I just find myself always integrating simplecss cdn when i try a new project thing, I realized this could be a nicer way |
And others are probably integrating a different CSS framework in projects they start, where they would then argue that they prefer if the recipe was using that instead of simplecss. |
When creating a new project, this helps people having a better first view of a symfony page, inspired by simple.css which I regularly use for test projects. It makes a more welcoming page for people trying a rapid app such as using make:entity, make:crud, etc.
I'm not sure where to point this in terms of branch, I would rather update the 6.4 recipe but it's a noticeable change so this might need a full new recipe.